import enquireJs from 'enquire.js'
import {Component, Vue} from 'vue-property-decorator'
import {SettingsModule} from "@/core/store/modules/settings";

export const DEVICE_TYPE = {
    DESKTOP: 'desktop',
    TABLET: 'tablet',
    MOBILE: 'mobile'
};

const deviceEnquire = function (callback: any) {
    const matchDesktop = {
        match: () => {
            callback && callback(DEVICE_TYPE.DESKTOP)
        }
    };

    const matchLablet = {
        match: () => {
            callback && callback(DEVICE_TYPE.TABLET)
        }
    };

    const matchMobile = {
        match: () => {
            callback && callback(DEVICE_TYPE.MOBILE)
        }
    };

    // screen and (max-width: 1087.99px)
    enquireJs
        .register('screen and (max-width: 576px)', matchMobile)
        .register('screen and (min-width: 576px) and (max-width: 1199px)', matchLablet)
        .register('screen and (min-width: 1200px)', matchDesktop)
};

@Component({
    name: 'Device'
})
export default class Device extends Vue {
    mounted() {
        deviceEnquire((deviceType: any) => {
            //console.log("deviceType---> ", deviceType);
            switch (deviceType) {
                case DEVICE_TYPE.DESKTOP:
                    SettingsModule.change({key: "device", value: DEVICE_TYPE.DESKTOP});
                    SettingsModule.change({key: "sidebar", value: true});
                    break;
                case DEVICE_TYPE.TABLET:
                    SettingsModule.change({key: "device", value: DEVICE_TYPE.TABLET});
                    SettingsModule.change({key: "sidebar", value: true});
                    break;
                case DEVICE_TYPE.MOBILE:
                default:
                    SettingsModule.change({key: "device", value: DEVICE_TYPE.MOBILE});
                    SettingsModule.change({key: "sidebar", value: true});
                    break
            }
        })
    }
}


